<template>
  <el-tabs
      class="group-tabs"
      v-model="active"
      type="card"
      :stretch="false"
      tab-position="top"
      @tab-click="tabClick"
  >
    <el-tab-pane class="group-tab-pane" label="子分组" name="subGroup" style="flex: 1">
      <GroupList
          :ref="'subGroup'"
          style="flex: 1; height: 100%"
          :from-detail="true"
          :click-current="clickCurrent"
          :load-group="props.loadGroup"
          :ref-table="'subRefTable'"
          :entry="entry"
      />
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="分组属性" name="attr">
      <AttributeList
          :ref="'attr'"
          :entry="entry"
      />
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="菜单" name="menus">
      <MenuAssignTree
          :ref="'menus'"
          :comment="'分配给用户分组的菜单信息'"
          :entry="assetEntry"
      />
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="权限" name="permits">
      <PermitAssignList
          :ref="'permits'"
          :entry="assetEntry"
      >
        <template v-slot:comment>
          <div style="margin: 32px 0 16px 0; color: #252a2f">
            用户分组还未分配任何权限，请点击下方按钮分配权限。
          </div>
        </template>
      </PermitAssignList>
    </el-tab-pane>
    <!--    <el-tab-pane class="group-tab-pane" label="角色" name="roles">-->
    <!--      <RoleAssignList-->
    <!--        :ref="'roles'"-->
    <!--        :entry="assetEntry"-->
    <!--      >-->
    <!--        <template v-slot:comment>-->
    <!--          <div style="margin: 32px 0 16px 0; color: #252a2f">-->
    <!--            用户分组还未分配任何角色，请点击下方按钮分配角色。-->
    <!--          </div>-->
    <!--        </template>-->
    <!--      </RoleAssignList>-->
    <!--    </el-tab-pane>-->
    <el-tab-pane class="group-tab-pane" label="用户列表" name="users">
      <UserAssignList
          :ref="'users'"
          :hold-type="TYPES.USER"
          :entry="entry"
          :comment="'显示直接在此分组中的所有用户信息'"
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import {currentNames, SERVERS, TYPES} from '@/stores/conf'
import GroupList from '@/widget/list/GroupList.vue'
import RoleAssignList from '@/widget/assign/RoleAssignList.vue'
import AttributeList from '@/widget/list/AttributeList.vue'
import PermitAssignList from '@/widget/assign/PermitAssignList.vue'
import MenuAssignTree from "@/widget/assign/MenuAssignTree.vue";

import '@/styles/tabs.css'
import {useListTabs} from "@/utils/UseListTabs";
import {ref} from "vue";
import UserAssignList from "@/widget/assign/UserAssignList.vue";

const props = withDefaults(
    defineProps<{
      loadGroup?: any
      routeItem?: any
    }>(),
    {}
)

const entry = ref({
  name: currentNames.PLAT_GROUP,
  type: TYPES.GROUP,
  server: SERVERS.PLATFORM
});

const assetEntry = ref({
  name: currentNames.PLAT_GROUP,
  type: TYPES.GROUP,
  server: SERVERS.ASSET
});

const {active, tabClick, handleCurrent, handleSwitch, clearTabs} = useListTabs('subGroup', currentNames.PLAT_GROUP);

const clickCurrent = () => {
  clearTabs();
}

defineExpose({
  handleCurrent,
  handleSwitch,
})

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

.group-tabs {
  display: flex;
  flex-direction: column;
}

.group-tabs >>> .el-tabs__header {
  padding-left: 16px;
}
</style>
